<section data-type="preface" id="_preface">
  <h1>Preface</h1>

  <section data-type="sect1" id="_p_1_what_is_this_book">
    <h2>P.1 What is this book?</h2>

    <p>
      At <a href="http://itp.nyu.edu">ITP</a>, I teach a course entitled
      Introduction to Computational Media. In this course, the students learn
      the basics of programming (variables, conditionals, loops, objects,
      arrays) as well as a survey of applications related to making interactive
      projects (images, pixels, computer vision, networking, data, 3D). The
      course mostly follows the material found in my intro book
      <em>Learning Processing</em>; in many ways,
      <em>The Nature of Code</em> serves as a follow-up. Once you’ve learned the
      basics and seen an array of applications, your next step might be to delve
      deeply into a particular area. For example, you could focus on computer
      vision (and read a book like Greg Borenstein’s
      <em>Making Things See</em>). In the most basic sense, this book is one
      possible next step in a world of many. It picks up exactly where
      <em>Learning Processing</em> leaves off, demonstrating more advanced
      programming techniques with Processing that focus on algorithms and
      simulation.
    </p>

    <p>
      The goal of this book is simple. We want to take a look at something that
      naturally occurs in our physical world, then determine how we can write
      code to simulate that occurrence.
    </p>

    <p>
      So then what is this book exactly? Is it a science book? The answer is a
      resounding no. True, we might examine topics that come from physics or
      biology, but it won’t be our job to investigate these topics with a
      particularly high level of academic rigor. Instead, we’re going to glance
      at scientific concepts and grab the parts that we need in the service of
      building a particular software example.
    </p>

    <p>
      Is this an art or design book? I would also say no; after all, we are
      going to focus on algorithms and their affiliated programming techniques.
      Sure, the results will all be visual in nature (manifested as animated
      Processing sketches), but they will exist more as demonstrations of the
      algorithms and programming techniques themselves, drawn only with simple
      shapes and grayscale. It is my hope, however, that designers and artists
      can incorporate all of the material here into their practice to make new,
      engaging work.
    </p>

    <p>
      In the end, if this book is anything, it is really just a good
      old-fashioned programming book. While a scientific topic may seed a
      chapter (Newtonian physics, cellular growth, evolution) or the results
      might inspire an artistic project, the content itself will always boil
      down to the code implementation, with a particular focus on
      object-oriented programming.
    </p>
  </section>

  <section data-type="sect1" id="_p_2_a_word_about_processing">
    <h2>P.2 A word about p5.js</h2>

    <p>
      I am using p5.js in this book for a number of reasons. For one, it’s the
      language and environment with which I am most comfortable, and it’s what I
      enjoy using for my personal work. Two, it’s free, open-source, and well
      suited to beginners. There is an active, energetic community of people who
      program with p5.js; for many, it’s the first programming language they’ve
      learned. In this sense, I hope that I can reach a wide audience and
      demonstrate the concepts in a friendly manner by using p5.js.
    </p>

    <p>
      All that said, there is nothing that ties what we are doing in this book
      strictly to p5.js. This book was previously written in Processing, but
      could have been written using JavaScript (without p5.js), Java, or any
      number of other open-source “creative coding” environments like
      openFrameworks, Cinder, and so on. It is my hope that after I’ve completed
      this book, I’ll be able to release versions of the examples that run in
      other environments. If anyone is interested in helping to port the
      examples, please feel free to contact me
      (<code>daniel@shiffman.net</code>).
    </p>

    <p>
      All of the examples in this book have been tested with p5.js v0.8.0, but
      for the most part, they should also work with earlier versions of p5.js.
      I’ll be keeping them up-to-date with whatever the latest version is. The
      most recent code can always be found on
      <a href="https://github.com/nature-of-code/noc-examples-p5.js">GitHub</a>.
    </p>
  </section>

  <section data-type="sect1" id="_p_3_what_do_you_need_to_know">
    <h2>P.3 What do you need to know?</h2>

    <p>
      The prerequisite for understanding the material in this book could be
      stated as: “one semester of programming instruction with p5.js (or
      javascript), Processing, or any other creative coding environment
      (including familiarity with object-oriented programming).” That said,
      there’s no reason why you couldn’t read this book having learned
      programming using a different language or development environment. The key
      here is that you have experience with programming.
    </p>

    <p>
      If you’ve never written any code before, you are going to struggle,
      because this book assumes knowledge of all the basics. I would suggest
      picking up an introductory book on Processing, a number of which are
      listed on
      <a href="http://processing.org/learning/books/">the Processing website</a
      >.
    </p>

    <p>
      If you are an experienced programmer, but haven’t worked with p5.js,
      you can probably pick it up by
      <a href="https://p5js.org/">checking out the p5.js documentation</a>,
      poking through the examples, and reading through the
      <a href="https://p5js.org/get-started/"
        >Getting Started</a
      >
      page.
    </p>

    <p>
      I should also point out that experience with object-oriented programming
      is crucial. We’ll review some of the basics in the book’s introduction,
      but I would suggest watching
      <a href="https://www.youtube.com/watch?v=T-HGdc8L-7w"
        >this video tutorial on Javascript objects and classes</a
	  > or this <a href="https://processing.org/tutorials/objects/"
	  >Processing tutorial on objects</a> 
      first.
    </p>
  </section>

  <section data-type="sect1" id="_p_4_what_are_you_using_to_read_this_book">
    <h2>P.4 What are you using to read this book?</h2>

    <p>
      Are you reading this book on a Kindle? Printed paper? On your laptop in
      PDF form? On a tablet showing an animated HTML5 version? Are you strapped
      to a chair, absorbing the content directly into your brain via a series of
      electrodes, tubes, and cartridges?
    </p>

    <p>
      The book you are reading right now was generated with the
      <a href="https://github.com/magicbookproject/">Magic Book project</a>. The
      Magic Book is an open-source framework for self-publishing developed at
      <a href="http://itp.nyu.edu">ITP</a>. The idea here is that you only need
      to write the book once as a simple text file. Once you’ve written your
      content, you press a magic button, and out comes your book in a variety of
      formats—PDF, HTML5, printed hardcopy, Kindle, etc. Everything is designed
      and styled using CSS. As of the first release, the only versions available
      will be digital PDF, printed hardcopy, and HTML5 (which will include
      animated versions of the examples using Processing.js). Hopefully over the
      course of the next year, the book will be available in additional formats.
      If you’d like to help with this, please contact me
      (<code>daniel@shiffman.net</code>).
    </p>
  </section>

  <section data-type="sect1" id="_p_5_the_story_of_this_book">
    <h2>P.5 The “story” of this book</h2>

    <p>
      If you glance over the book’s table of contents, you’ll notice there are
      ten chapters, each one covering a different topic. And in one sense, this
      book is just that—a survey of ten concepts and associated code examples.
      Nevertheless, in putting together the material, I had always imagined
      something of a linear narrative. Before you begin reading the chapters,
      I’d like to walk you through this story.
    </p>

    <section data-type="sect2" id="_part_i_inanimate_objects">
      <h2>Part I: Inanimate objects</h2>

      <p>
        A soccer ball lies in the grass. A kick launches it into the air.
        Gravity pulls it back down. A heavy gust of wind keeps it afloat a
        moment longer until it falls and bounces off the head of a jumping
        player. The soccer ball is not alive; it makes no choices as to how it
        will move throughout the world. Rather, it is an inanimate object
        waiting to be pushed and pulled by the forces of its environment.
      </p>

      <p>
        How would we model a soccer ball moving in Processing? If you’ve ever
        programmed a circle moving across a window, then you’ve probably written
        the following line of code.
      </p>

      <pre
        data-code-language="java"
        data-type="programlisting"
        class="codesplit"
      >
x = x + 1;</pre
      >

      <p>
        You draw some shape at position <code>x</code>. With each frame of
        animation, you increment the value of <code>x</code>, redraw the shape
        and voila—the illusion of motion! Maybe you took it a step or two
        further, and included a <code>y</code> position, as well as variables
        for speed along the <em>x</em> and <em>y</em> axes.
      </p>

      <pre
        data-code-language="java"
        data-type="programlisting"
        class="codesplit"
      >
x = x + xspeed;
y = y + yspeed;</pre
      >

      <p>
        Part I of this story will take us one step further. We’re going to take
        these variables <code>xspeed</code> and <code>yspeed</code> and learn
        how together they form a vector (<strong>Chapter 1</strong>), the
        building block of motion. We won’t get any new functionality out of
        this, but it will build a solid foundation for the rest of the book.
      </p>

      <p>
        Once we know a little something about vectors, we’re going to quickly
        realize that a force (<strong>Chapter 2</strong>) is a vector. Kick a
        soccer ball and you are applying a force. What does a force cause an
        object to do? According to Isaac Newton, force equals mass times
        acceleration. That force causes an object to accelerate. Modeling forces
        will allow us to create systems with dynamic motion where objects move
        according to a variety of rules.
      </p>

      <p>
        Now, that soccer ball to which you applied a force might have also been
        spinning. If an object moves according to its acceleration, it can spin
        according to its angular acceleration (<strong>Chapter 3</strong>).
        Understanding the basics of angles and trigonometry will allow us to
        model rotating objects as well as grasp the principles behind
        oscillating motion, like a pendulum swinging or a spring bouncing.
      </p>

      <p>
        Once we’ve tackled the basics of motion and forces for an individual
        inanimate object, we’ll learn how to make thousands upon thousands of
        those objects and manage them in a single system called a particle
        system (<strong>Chapter 4</strong>). Particle systems will allow us to
        look at some advanced features of object-oriented programming, namely
        inheritance and polymorphism.
      </p>

      <p>
        In Chapters 1 through 4, all of the examples will be written from
        “scratch”—meaning the code for the algorithms driving the motion of the
        objects will be written directly in Processing. We’re certainly not the
        first programmers ever to consider the idea of simulating physics in
        animation, so next we’ll examine how physics libraries (<strong
          >Chapter 5</strong
        >) can be used to model more advanced and sophisticated behaviors. We’ll
        look at <a href="http://www.box2d.org">Box2D</a> and
        <a href="http://toxiclibs.org/">toxiclibs' Verlet Physics package</a>.
      </p>
    </section>

    <section data-type="sect2" id="_part_ii_it_s_alive">
      <h2>Part II: It’s alive!</h2>

      <p>
        What does it mean to model life? Not an easy question to answer, but we
        can begin by building objects that have an ability to perceive their
        environment. Let’s think about this for a moment. A block that falls off
        a table moves according to forces, as does a dolphin swimming through
        the water. But there is a key difference. The block cannot decide to
        leap off that table. The dolphin can decide to leap out of the water.
        The dolphin can have dreams and desires. It can feel hunger or fear, and
        those feelings can inform its movements. By examining techniques behind
        modeling autonomous agents (<strong>Chapter 6</strong>), we will breathe
        life into our inanimate objects, allowing them to make decisions about
        their movements according to their understanding of their environment.
      </p>

      <p>
        Through combining the concept of autonomous agents with what we learned
        about modeling systems in Chapter 4, we’ll look at models of group
        behavior that exhibit the properties of complexity. A complex system is
        typically defined as a system that is “more than the sum of its parts.”
        While the individual elements of the system may be incredibly simple and
        easily understood, the behavior of the system as a whole can be highly
        complex, intelligent, and difficult to predict. This will lead us away
        from thinking purely about modeling motion and into the realm of
        rule-based systems. What can we model with cellular automata (<strong
          >Chapter 7</strong
        >), a system of cells living on a grid? What types of patterns can we
        generate with fractals (<strong>Chapter 8</strong>), the geometry of
        nature?
      </p>
    </section>

    <section data-type="sect2" id="_part_iii_intelligence">
      <h2>Part III: Intelligence</h2>

      <p>
        We made things move. Then we gave those things hopes and dreams and
        fears, along with rules to live by. The last step in this book will be
        to make our creations even smarter. Can we apply the biological process
        of evolution to computational systems (<strong>Chapter 9</strong>) in
        order to evolve our objects? Taking inspiration from the human brain,
        can we program an artificial neural network (<strong>Chapter 10</strong
        >) that can learn from its mistakes and allow our objects to adapt to
        their environment?
      </p>
    </section>
  </section>

  <section data-type="sect1" id="_p_6_this_book_as_a_syllabus">
    <h2>P.6 This book as a syllabus</h2>

    <p>
      While the content in this book certainly makes for an intense and highly
      compressed semester, I have designed it to fit into a fourteen-week
      course. Nevertheless, it’s worth mentioning that I find that the book
      chapters sometimes work better expanded across multiple weeks. For
      example, the syllabus for my course generally works out as follows:
    </p>

    <dl class="preface">
      <dt>Week 1</dt>
      <dd>
        <p>Introduction and Vectors (Chapter 1)</p>
      </dd>
      <dt>Week 2</dt>
      <dd>
        <p>Forces (Chapter 2)</p>
      </dd>
      <dt>Week 3</dt>
      <dd>
        <p>Oscillations (Chapter 3)</p>
      </dd>
      <dt>Week 4</dt>
      <dd>
        <p>Particle Systems (Chapter 4)</p>
      </dd>
      <dt>Week 5</dt>
      <dd>
        <p>Physics Libraries Part I (Chapter 5)</p>
      </dd>
      <dt>Week 6</dt>
      <dd>
        <p>Physics Libraries Part II &amp; Steering (Chapters 5-6)</p>
      </dd>
      <dt>Week 7</dt>
      <dd>
        <p>Present midterm projects about motion</p>
      </dd>
      <dt>Week 8</dt>
      <dd>
        <p>Complex Systems: Flocking and 1D Cellular Automata (Chapters 6-7)</p>
      </dd>
      <dt>Week 9</dt>
      <dd>
        <p>Complex Systems: 2D Cellular Automata and Fractals (Chapters 7-8)</p>
      </dd>
      <dt>Week 10</dt>
      <dd>
        <p>Genetic Algorithms (Chapter 9)</p>
      </dd>
      <dt>Week 11</dt>
      <dd>
        <p>Neural Networks (Chapter 10)</p>
      </dd>
      <dt>Weeks 12-13</dt>
      <dd>
        <p>Final project workshop</p>
      </dd>
      <dt>Week 14</dt>
      <dd>
        <p>Final project presentation</p>
      </dd>
    </dl>

    <p>
      If you are considering using this text for a course or workshop, please
      feel free to contact me. I hope to eventually release a companion set of
      videos and slide presentations as supplementary educational materials.
    </p>
  </section>

  <section data-type="sect1" id="_p_7_the_ecosystem_project">
    <h2>P.7 The Ecosystem Project</h2>

    <p>
      As much as I’d like to pretend you could learn everything by curling up in
      a comfy chair and reading some prose about programming, to learn
      programming, you’re really going to have to do some programming. You might
      find it helpful to keep in mind a project idea (or two) to develop as a
      set of exercises while going from chapter to chapter. In fact, when
      teaching the Nature of Code course at ITP, I have often found that
      students enjoy building a single project, step by step, week by week, over
      the course of a semester.
    </p>

    <p>
      At the end of each chapter, you’ll find a series of exercises for one such
      project—exercises that build on each other, one topic at a time. Consider
      the following scenario. You’ve been asked by a science museum to develop
      the software for a new exhibit—The Digital Ecosystem, a world of animated,
      procedural creatures that live on a projection screen for visitors to
      enjoy as they enter the museum. I don’t mean to suggest that this is a
      particularly innovative or creative concept. Rather, we’ll use this
      example project idea as a literal representation of the content in the
      book, demonstrating how the elements fit together in a single software
      project. I encourage you to develop your own idea, one that is more
      abstract and creative in its thinking.
    </p>
  </section>

  <section
    data-type="sect1"
    id="_p_8_where_do_i_find_the_code_online_and_submit_feedback"
  >
    <h2>P.8 Where do I find the code online and submit feedback?</h2>

    <p>
      For all things book-related, please visit the
      <a href="http://www.natureofcode.com">Nature of Code website</a>. The raw
      source text of the book and all of the illustrations are on
      <a href="https://github.com/nature-of-code/noc-book-2">GitHub</a>. Please
      leave feedback and submit corrections using GitHub issues.
    </p>

    <p>
      The source code for all of the examples (and exercises) is also available
      on
      <a href="https://github.com/nature-of-code/noc-examples-p5.js">GitHub</a
      >. The chapters themselves include code snippets in-line with the text.
      However, I want to mention that in many cases, I have shortened or
      simplified the code snippets in order to illustrate a specific point. In
      all cases, the full code with comments can be found via GitHub.
    </p>

    <p>
      If you have questions about the code itself, I would suggest posting them
      on the <a href="http://forum.processing.org">Processing forum</a>.
    </p>
  </section>
</section>
